<template>
    <div>
        <h1>{{ goodsInfo.title}}</h1>
        <div class=""></div>
        <el-descriptions :column="1">
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-time mr-sm"></i>
                    发布时间
                </template>{{ goodsInfo.create_time }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="iconfont icon-danwei mr-sm"></i>
                    所属单位
                </template>{{ goodsInfo.shop_name }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="iconfont icon-dianhua mr-sm"></i>
                    联系方式
                </template>{{ goodsInfo.contacts }} {{ goodsInfo.contacts_phone }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="iconfont icon-liulan mr-sm"></i>
                    浏览总数
                </template>{{ goodsInfo.view }}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
            <el-descriptions-item label="参考报价" :labelStyle="{
                'display': 'flex', 'align-items': 'center'
            }">
                <span class="font-24 text-red">￥{{ goodsInfo.price || '-' }}</span>

                <span class="ml-30">历年中标价</span>
                <span class="font-24 text-red">￥1000 - ￥2000</span>
            </el-descriptions-item>
        </el-descriptions>
        <div class="mt-30" style="display: grid;grid-template-columns: repeat(3, 1fr);">
            <el-button type="danger" @click="handleAddToCart">立即购买</el-button>
            <el-button type="danger" plain @click="handleConsultation">采购咨询</el-button>
            <el-button type="danger" plain @click="handleComparison">{{ isInComparison? '取消对比' : '加入对比' }}</el-button>
        </div>
        <el-dialog title="电话助手" :visible.sync="dialogVisible" width="400px" class="phone-modal">
            <div class="content">
                <p v-if="!isLogin">请登录后查看联系方式</p>
                <template v-else>
                    <p class="phone text-hide-3">{{ goodsInfo.shop_pre_sale || '-' }}</p>
                    <div>
                        <span>
                            手机扫一扫,即可一键拨打电话<br>
                            免去自己输入号码还怕打错电话的麻烦
                        </span>
                        <section>
                            <qrcode :value="`tel:${goodsInfo.shop_pre_sale}`" v-if="goodsInfo.shop_pre_sale"
                                :options="{ size: 88 }" style="margin: 24px 0 16px;"></qrcode>
                            <p class="tip">扫码拨号</p>
                        </section>
                    </div>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapState, mapMutations } from "vuex"
import Qrcode from '@xkeshi/vue-qrcode'
export default {
    name: "productInfo",
    props: {
        goodsInfo: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        qrcode: Qrcode
    },
    data () {
        return {
            dialogVisible: false,
            qrcodeUrl: ''
        }
    },
    computed: {
        ...mapGetters(['isLogin']),
        ...mapState('carts', ['carts']),
        ...mapState('comparison', ['prods', 'max']),
        // 当前产品是否存在于对比列表中
        isInComparison () {
            return this.prods.some(item => item.id === this.goodsInfo.id)
        },
        // 计算 vuex 中对比列表中的总数量
        total () {
            return this.$store.getters['comparison/getProds']
        },
    },
    mounted () {

    },
    methods: {
        ...mapMutations('carts', ['addCart', 'clearCart']), // 添加商品至购物车
        handleAddToCart () {
            // 当前应用没有购物车概念，但需要点击跳转到新页面填写相关信息，所以先清空，保证购物车内只有一件商品
            this.clearCart();
            this.addCart(this.goodsInfo);
            this.$router.push({ name: 'productsCart' });
        },

        // 加入对比
        ...mapMutations('comparison', ['addComparison', 'deleteComparison']),
        handleComparison () {
            if (this.total >= 5) {
                return this.$message.error(`最多只能对比 ${this.max} 个产品`)
            }

            if (this.isInComparison) {
                this.deleteComparison(this.goodsInfo);
            } else {
                this.addComparison(this.goodsInfo);
            }
        },
        // 采购咨询
        handleConsultation(){            
            this.dialogVisible = true;
            console.log(this.goodsInfo.shop_pre_sale)
        }
    }
}
</script>

<style lang="less" scoped>
h1 {
    color: #2E3033;
    font-size: 20px;
    margin-bottom: 30px;
}

.phone-modal {
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 258px;
        padding: 24px;
        text-align: center;
        background: #f3f4f7;
        .phone {
            margin-bottom: 16px;
            font-size: 28px;
            font-weight: 500;
            line-height: 30px;
            color: #000;
            letter-spacing: 0;
        }
        .tip {
            font-size: 14px;
            line-height: 18px;
            color: #303133;
        }
    }
}
</style>